<template>
    <div>
        <el-card class="box-card">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="0">当天</el-menu-item>
                <el-menu-item index="7">7天</el-menu-item>
                <el-menu-item index="30">30天</el-menu-item> </el-menu
            ><br />
            <el-card class="box-card2">
                <div class="text item">
                    <h1>{{all_order}}</h1>
                    <br />
                    <span>总运单数</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>1</h1>
                    <br />
                    <span>总设备数</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>{{zai_order}}</h1>
                    <br />
                    <span>在途运单</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>{{bao_order}}</h1>
                    <br />
                    <span>报警运单</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
        </el-card>
        <div id="chartLineBox" style="width: 90%;height: 70vh;"> </div>
    </div>
</template>

<script>
 import echarts from 'echarts'
import { pandect } from '../../api/api';
export default {
    data() {
        return {
            activeIndex: '0',
            all_order:0,
            zai_order:0,
            bao_order:0
        };
    },
    methods: {
        handleSelect(key, keyPath) {
           
            this.activeIndex = key;
            console.log(this.activeIndex)
            var params = {
                activeIndex :this.activeIndex,
                
            };
            pandect(params).then(res => {
                console.log(res);
                this.all_order = res['num'] 
                this.zai_order = res.num1 
                this.bao_order = res.num2 
                // console.log(this.all_order,this.zai_order,this.bao_order)
            });
        }
    },

    mounted: function() {
        // 获取总览信息
        pandect({ params: { activeindex: this.activeIndex } }).then(res => {
            console.log(res);
            
        });
         this.chartLine = echarts.init(document.getElementById('chartLineBox'));
 
        // 指定图表的配置项和数据
        var option = {
            tooltip: {              //设置tip提示
                trigger: 'axis'
            },
            
            legend: {               //设置区分（哪条线属于什么）
                data:['发货数量','收货数量']
            },
            color: ['#8AE09F', '#FA6F53'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
            xAxis: {                //设置x轴
                type: 'category',
                boundaryGap: false,     //坐标轴两边不留白
                data: ['2019-1-1', '2019-2-1', '2019-3-1', '2019-4-1', '2019-5-1', '2019-6-1', '2019-7-1',],
                name: 'DATE',           //X轴 name
                nameTextStyle: {        //坐标轴名称的文字样式
                    color: '#FA6F53',
                    fontSize: 16,
                    padding: [0, 0, 0, 20]
                },
                axisLine: {             //坐标轴轴线相关设置。
                    lineStyle: {
                        color: '#FA6F53',
                    }
                }
            },
            yAxis: {
                name: '数量',
                nameTextStyle: {
                    color: '#FA6F53',
                    fontSize: 16,
                    padding: [0, 0, 10, 0]
                },
                axisLine: {
                    lineStyle: {
                        color: '#FA6F53',
                    }
                },
                type: 'value'
            },
            series: [
              {
                name: '发货数量',
                data:  [220, 232, 201, 234, 290, 230, 220],
                type: 'line',               // 类型为折线图
                lineStyle: {                // 线条样式 => 必须使用normal属性
                    normal: {
                        color: '#8AE09F',
                    }
                },
              },
              {
                name: '收货数量',
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'line',
                lineStyle: {
                    normal: {
                        color: '#FA6F53',
                    }
                },
              }
          ]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        this.chartLine.setOption(option);
    },
};
</script>

<style>
#chartLineBox{
    margin-top: 150px;
}

.text {
    font-size: 14px;
    text-align: center;
    margin: auto;
}

.item {
    padding: 18px 0;
    width: 25%;
}

.box-card {
    width: 100%;
}
.box-card1 {
    width: 25%;
    height: 250px;
    float: left;
}
.box-card2 {
    width: 24%;
    height: 250px;
    float: left;
}
</style>